<template>
    <div>
        <img class="imgBig" src="../img/01qianggou.png" alt="">
        <ul>
            <li v-for="item in oneList2" :key="item.name">
                <router-link :to="'/topic'+item.productId">
                    <img :src="$store.state.imgsrc+item.productsImg" alt="">
                    <p>{{item.productName}}</p>
                    <div>
                        <span class="span1">¥1.0</span>
                        <span class="span2">¥{{item.productPrice}}</span>
                    </div>
                </router-link>
            </li>
        </ul>
        <div class="foot"></div>
    </div>
</template>

<script>
import {homeOne} from '@/api'
    export default {
        data(){
            return{
                oneList:[
                    {
                        img:'../img/u1.png',
                        name:'【百草味】百花果冻干 250g',
                        price:'1.0',
                        lastPrice:'268.0'
                    },
                    {
                        img:'../img/u1.png',
                        name:'【百草味】百花果冻干1 250g',
                        price:'1.0',
                        lastPrice:'268.0'
                    },
                    {
                        img:'../img/u1.png',
                        name:'【百草味】百花果冻干2 250g',
                        price:'1.0',
                        lastPrice:'268.0'
                    },
                    {
                        img:'../img/u1.png',
                        name:'【百草味】百花果冻干3 250g',
                        price:'1.0',
                        lastPrice:'268.0'
                    }
                ],
                oneList2:[

                ]
            }
        },
        methods:{
            getHomeOne(){
                homeOne({
                    discounts:1
                }).then(res=>{
                    // console.log(res,'homeone')
                    this.oneList2 = res.data.data
                })
            }
        },
        mounted(){
            this.getHomeOne()
        }
    }
</script>

<style scoped>
.imgBig{
    width: 100vw;
}
ul{
    margin-top: 0.5vh;
    display: flex;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
}
ul::-webkit-scrollbar{
        display: none;
    }
li img{
    width: 35vw;
    height: 18vh;
}
li{
    white-space:normal;
    width: 35vw;
    margin-right: 5vw;
}
li p{
    color: #666666;
     display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-decoration: none;
    margin-bottom: 1vh;
}
.span1{
    font-size: 18px;
    color: #FF380D;
    margin-right: 4.5vw;
}
.span2{
    font-size: 14px;
    color: #999999;
    text-decoration: line-through;
}
.foot{
    margin-top: 2vh;
    width: 100vw;
    background: #eeeeee;
    height: 1vh;
}
</style>